<template>
  <div>
    <el-dialog
      title="用户注册"
      :visible.sync="dialogVisible"
      width="600px"
      center
    >
      <el-form
        label-position="left"
        :model="Reqisterform"
        ref="reqisterform"
        :rules="rules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-form-item label="头像" prop="avatar">
          <!--
            action：上传的地址，它上传跟axios没有关系，它是自己封装的，地址要写全
            data：上传时候需要传递的参数，按照接口文档，它的属性名叫 image
            show-file-list：是否展示列表
            before-upload：上传之前，需要做两件事，第一是格式和大小判断，第二把它里面的参数 file 赋值给
                el-upload属性的data中的image
            on-success：上传成功之后，需要做两件事，第一头像上传的框中的图片要变成预览图片(就是给imageUrl)
                      第二件事情是，把上传得到的服务器地址（"file_path":"uploads/20191024/d79f16177aa4d3bf4d2e2398f41c6d68.PNG"）
                      赋值给 registerForm.avatar
           -->
          <!-- 带参数 必须是data 对象 -->
          <el-upload
            class="avatar-uploader"
            :action="actionUrl"
            :show-file-list="false"
            :data="uploadObj"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        <el-form-item label="昵称" prop="username">
          <el-input v-model="Reqisterform.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="Reqisterform.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input v-model="Reqisterform.phone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="Reqisterform.password" show-password></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="17">
            <el-form-item label="图形码" prop="code">
              <el-input v-model="Reqisterform.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left:10px">
            <img
              :src="CUrl"
              alt=""
              style="width:100%;height:40px"
              @click="changeCode"
            />
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="17">
            <el-form-item label="验证码" prop="rcode">
              <el-input v-model="Reqisterform.rcode" ref="refRcode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="margin-left:10px">
            <el-button @click="getRcode">获取用户验证码</el-button>
          </el-col>
        </el-row>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="register">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "Reqister",
  data() {
    return {
      // 头像
      actionUrl: `${process.env.VUE_APP_BASEURL}uploads`,
      uploadObj: {
        image: "",
      },
      imageUrl: "",
      //   code: "",  图片码需要写在Reqisterform里面 不然 规则验证不生效 等注册发送请求的时候 delete删掉该属性因为不需要传过去  delete this.Reqisterform.code
      codeUrl: "",
      dialogVisible: false, //觉得对话框的显示隐藏
      CUrl: `${process.env.VUE_APP_BASEURL}captcha?type=sendsms`,
      Reqisterform: {
        code: "",
        username: "",
        phone: "",
        email: "",
        avatar: "",
        password: "",
        rcode: "",
      },
      //   表单验证规则
      rules: {
        //   昵称
        username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        // 邮箱
        email: [
          {
            required: true,
            validator: (rule, value, callback) => {
              /**
               * rule：规则
               * value：用户输入的值
               * callback：决定是否校验ok，如果里面没有接 new Error('xxxx')，callback必须调用 这个必须写
               * 报错了就写错误内容 成功啦就括号不写内容
               */
              if (!value) {
                // return 阻止代码继续往下执行
                return callback(new Error("邮箱不能为空!"));
              }

              // eslint禁用
              /* eslint-disable */
              const reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
              // eslint启用
              /* eslint-enable */
              if (!reg.test(value)) {
                // return 阻止代码继续往下执行
                return callback(new Error("邮箱不合法!"));
              }

              // 校验ok
              callback();
            },
            trigger: "blur",
          },
        ],
        // 手机
        phone: [
          {
            required: true, // 加了这个前面就会有红星星
            validator: (rule, value, callback) => {
              /**
               * rule：规则
               * value：用户输入的值
               * callback：决定是否校验ok，如果里面没有接 new Error('xxxx')，callback必须调用
               */
              if (!value) {
                // return 阻止代码继续往下执行
                return callback(new Error("手机号不能为空!"));
              }

              const reg = /^1[3456789][0-9]{9}$/;
              if (!reg.test(value)) {
                // return 阻止代码继续往下执行
                return callback(new Error("手机号不合法!"));
              }

              // 校验ok
              callback();
            },
            trigger: "blur",
          },
        ],
        // 头像   这里比较特殊 是blur 不是change 鼠标移入可以看到效果 用change 和blur
        avatar: [{ required: true, message: "头像不能为空", trigger: "blur" }],
        // 密码
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        // 图形码
        code: [{ required: true, message: "请输入图形码", trigger: "blur" }],
        // 验证码
        rcode: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    changeCode() {
      this.CUrl = ` ${
        process.env.VUE_APP_BASEURL
      }captcha?type=sendsms&d=${new Date() - 0}`;
    },
    async getRcode() {
      if (
        this.Reqisterform.phone.trim().length === 0 ||
        this.Reqisterform.code.trim().length === 0
      ) {
        this.$message({
          message: "手机号或图形码不能为空",
          type: "warning",
        });
        // 阻止后面代码执行
        return;
      }
      const res = await this.$http.post("sendsms", {
        code: this.Reqisterform.code,
        phone: this.Reqisterform.phone,
      });
      if (res.code == 200) {
        // console.log(res.data.captcha);
        this.Reqisterform.rcode = res.data.captcha;
      } else {
        this.$message.error(res.message);
        this.changeCode();
      }
    },
    // 头像处理
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // 要把上传的文件赋值给image 不然可以看到发送了请求 但是 打印显示没文件上传
      this.uploadObj.image = file;

      // return false 的话 不会上传文件过去(因此isJPG && isLt2M只要一个不满足条件就不发送请求)  这里的请求是 element-ui内部实现了 类似 formdata 不是axios请求
      return isJPG && isLt2M;
    },
    // 上传成功
    handleAvatarSuccess(res, file) {
      //  做两件事 一是图片预览  这里有两种方式 1 传统的基地址拼接返回的图片部分url地址 2,利用element-ui转base64格式的图片方式 (其实不是base64  是element-ui 图片预览方法处理过的图片 base64格式的图片url很长)
      // 1 图片预览 方法1
      // console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
      // 图片预览方法2  传统方法
      // this.imageUrl = process.env.VUE_APP_BASEURL + res.data.file_path;
      // 第二件事 就是将响应回来的图片url给注册时头像参数 avatar  用来注册
      this.Reqisterform.avatar = res.data.file_path;
    },
    // 注册
    register() {
      this.$refs.reqisterform.validate(async (valid) => {
        if (!valid) return;
        // 发请求删掉不要的参数  其实这个参数不删 带过去也没事因为用不到这个参数 不会处理他的
        delete this.Reqisterform.code;
        const res = await this.$http.post("register", this.Reqisterform);
        // console.log(res);
        if (res.code === 200) {
          this.$message({
            message: "注册成功",
            type: "success",
          });
          // 注册成功隐藏注册框 本身就在登入页因此没必要跳转登入页
          this.dialogVisible = false;
          // 重置表单避免下次注册上次内容还在 图片预览需要手动清空 他不属于 表单
          this.$refs.reqisterform.resetFields();
          this.imageUrl = "";
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px !important;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader {
  text-align: center;
}
</style>
